<template>
  <div id="app" @keyup.13="login()">
    <div class="login clearfix">
      <div class="left">
        <i class="bgColor"></i>
        <img src="../../../static/img/login_bg.png" class="bgImg" />
        <a class="logoTitle">
          <img src="../../../static/img/logo_white.png" />蜂窝帮
          <font>我们是全球最大的任务交易平台</font>
        </a>
      </div>
      <div class="right">
        <div class="center">
          <h3 class="r_title">
            后台登录
            <font>Admin LOGIN</font>
          </h3>
          <el-form>
            <el-form-item>
              <el-input placeholder="请输入账号" prefix-icon="el-icon-user-solid" class="input"
                v-model="form.name"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-input placeholder="密码" prefix-icon="el-icon-s-cooperation" class="input"
                v-model="form.passwd"  show-password
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" class="btn"
                @click="login()"
                :loading="loading"
              >立即登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import md5 from "js-md5";
import apiMixin from '@/mixin/apiMixin';
import uilts from '@/utils/index';
export default {
  mixins: [apiMixin],
  data() {
    return {
        time:new Date().getTime(),
				loading:false,
				form:{
					name:"",
          passwd:"",
          vercode:"1234"
				}
    }
  },
  methods: {
    login(){
        let that = this;
				if(!((that.form.name && that.form.passwd))){
          that.$notify({title: '警告',message: '请输入完整后再尝试登录',type: 'warning'});
					return;
				}
				let { name,passwd,vercode } = that.form;
        this.loginApi(name,md5(md5(vercode) + md5(passwd)),vercode);
    },
    loginApi(name,passwd,vercode) {
      let _self = this;
      this.comResquest(this.request.postAdminLogin,(res)=>{
        uilts.handleLocalStorage.set('authorized_key',res.authorized_key);
        uilts.handleLocalStorage.set('name',res.name);
        uilts.handleLocalStorage.set('qq',res.qq);
        uilts.handleLocalStorage.set('adminLink',res);
        _self.$router.push({path: '/'})
      },{
        name,
        passwd,
        vercode,
        load:true
      },);
    }
  },
}
</script>

<style lang="scss" scoped>
.login {
  overflow: hidden;
  min-width: 1400px;
  min-height: 800px;
  .btn {
    height: 47px;
    width: 100%;
    font-size: 15px;
  }

  .left {
    float: left;
    width: 50%;
    height: 100vh;
    min-height: 800px;
    position: relative;

    .bgColor {
      width: 400vh;
      height: 400vh;
      background: linear-gradient(to right, #fff 0%, #89d6ff 75%, #4e86ff 100%);
      position: absolute;
      top: -150vh;
      right: 53vh;
      transform: rotate(30deg);
    }

    .bgImg {
      position: absolute;
      bottom: 0%;
      right: 5%;
      max-width: 700px;
      width: 80%;
    }

    .logoTitle {
      position: absolute;
      top: 5%;
      left: 5%;
      color: #fff;
      font-weight: bold;
      font-size: 36px;
      text-align: center;

      img {
        width: 70px;
        height: 70px;
        margin-right: 10px;
        vertical-align: middle;
        margin-top: -8px;
      }

      font {
        font-size: 13px;
        display: block;
        font-weight: normal;
        margin-top: 20px;
      }
    }
  }

  .right {
    float: left;
    width: 45%;
    height: 100vh;
    min-height: 800px;
    position: relative;

    .center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 400px;

      .r_title {
        font-size: 27px;
        color: #000;
        margin-bottom: 40px;
        font-weight: bold;

        font {
          display: block;
          font-weight: normal;
          color: #b7b7b7;
          font-size: 16px;
          margin-top: 5px;
        }
      }
    }
  }
}

.veriyCode {
  position: relative;

  .codeImg {
    position: absolute;
    right: 1px;
    height: 35px;
    top: -10px;
    cursor: pointer;
  }
}
</style>
